---
import { Image } from 'astro:assets'

// import { Quote } from 'astro-pure/advanced'
import { PostPreview } from 'astro-pure/components/pages'
import { getBlogCollection, sortMDByDate } from 'astro-pure/server'
import { Button, Card, Icon, Label } from 'astro-pure/user'
import PageLayout from '@/layouts/BaseLayout.astro'
import ProjectCard from '@/components/home/ProjectCard.astro'
import Section from '@/components/home/Section.astro'
import SkillLayout from '@/components/home/SkillLayout.astro'
import avatar from '@/assets/avatar.png'
import config from '@/site-config'

const languages = ['Java', 'TypeScript', 'Python']
const frontend = ['React', 'Vue', 'Astro']
const backend = ['SpringCloud', 'RabbitMQ & Kafka', 'Elasticsearch', 'MySQL', 'Redis', 'Seata']

const MAX_POSTS = 10
const allPosts = await getBlogCollection()
const allPostsByDate = sortMDByDate(allPosts).slice(0, MAX_POSTS)
---

<PageLayout meta={{ title: 'Home' }} highlightColor='#659EB9'>
  <main class='flex w-full flex-col items-center'>
    <section class='animate mb-10 flex flex-col items-center gap-y-7' id='content-header'>
      <Image
        src={avatar}
        alt='profile'
        class='h-28 w-auto rounded-full border p-1'
        loading='eager'
      />

      <div class='flex flex-col items-center gap-y-4'>
        <h1 class='text-3xl font-bold'>{config.author}</h1>
        <div class='flex flex-wrap justify-center gap-x-7 gap-y-3'>
          <Label title='长沙'>
            <Icon name='location' class='size-5' slot='icon' />
          </Label>
          {/* <Label
            title='Source code'
            as='a'
            href='https://github.com/cworld1/astro-theme-pure'
            target='_blank'
          >
            <Icon name='github' class='size-5' slot='icon' />
          </Label>*/}
        </div>
      </div>

      {/* Get template
      <a
        href='https://github.com/cworld1/astro-theme-pure'
        target='_blank'
        class='flex flex-row items-center gap-x-3 rounded-full border bg-background px-4 py-2 text-sm shadow-sm transition-shadow hover:shadow-md'
      >
        <span class='relative flex items-center justify-center'>
          <span
            class='absolute size-2 animate-ping rounded-full border border-green-400 bg-green-400 opacity-75'
          ></span>
          <span class='size-2 rounded-full bg-green-400'></span>
        </span>
        <p class='font-medium text-muted-foreground'>Get Template</p>
      </a>
    </section>*/}

    <div id='content' class='animate flex flex-col gap-y-10 md:w-4/5 lg:w-5/6'>

      {/*<Section title='About'>
        <p class='text-muted-foreground'>码农</p>
        <p class='text-muted-foreground'>
          Lorem ipsum dolor sit amet, vidit suscipit at mei. Quem denique mea id. Usu ei regione
          indoctum dissentiunt, cu meliore fuisset mei, vel quod voluptua ne. Ex dicat impedit mel,
          at eum oratio possit voluptatum.
        </p>
        <Button title='More about me' class='w-fit self-end' href='/about' variant='ahead' />
      </Section>*/}
      {
        allPostsByDate.length > 0 && (
          <Section title='文章'>
            <ul class='flex flex-col gap-y-1.5 sm:gap-y-2'>
              {allPostsByDate.map((p) => (
                <li class='flex flex-col gap-x-2 sm:flex-row'>
                  <PostPreview post={p} />
                </li>
              ))}
            </ul>
            <Button title='更多文章' class='w-fit self-end' href='/blog' variant='ahead' />
          </Section>
        )
      }

      {/* <Section title='Experience'>
      <Card
        heading='Lorem Ipsum'
        subheading='Sit amet consectetur'
        date='Dec 2022 - Nov 2023'
        imagePath='/src/assets/about-astro.png'
        altText='Lorem, ipsum dolor sit'
        imageClass='h-12 w-auto md:-start-16'
      >
        <ul class='ms-4 list-disc text-muted-foreground'>
          <li>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore debitis recusandae, ut
            molestiae laboriosam pariatur!

            <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae, pariatur!</li>
          </li>
        </ul>
      </Card>
      <Card
        heading='Lorem Ipsum'
        subheading='Sit amet consectetur'
        date='Dec 2022 - Nov 2023'
        imagePath='/src/assets/about-astro.png'
        altText='Lorem, ipsum dolor sit'
        imageClass='h-12 w-auto md:-start-16'
      />
    </Section> */}

      {/* <Section title='Education'>
        <Card
          as='a'
          heading='Lorem ipsum'
          subheading='Lorem ipsum dolor sit amet, vidit suscipit at mei.'
          date='August 2021 - July 2025'
          href='https://www.youtube.com/watch?v=dQw4w9WgXcQ'
        >

        </Card>
      </Section> */}

      {/* <Section title='Website List'>
        <div class='grid grid-cols-1 gap-3 sm:grid-cols-2'>
          <ProjectCard
            href='https://www.youtube.com/watch?v=dQw4w9WgXcQ'
            heading='Lorem ipsum'
            subheading='dolor sit amet, oratio ornatus explicari pro ex'
            imagePath='/src/assets/projects/alex-tyson-2BAXJ7ha74s-unsplash.jpg'
          />
          <ProjectCard
            href='https://www.youtube.com/watch?v=dQw4w9WgXcQ'
            heading='Lorem ipsum'
            subheading='dolor sit amet, oratio ornatus explicari pro ex'
            imagePath='/src/assets/projects/angelica-teran-Bk9hpaXHK4o-unsplash.jpg'
          />
          <ProjectCard
            href='https://www.youtube.com/watch?v=dQw4w9WgXcQ'
            heading='Lorem ipsum'
            subheading='dolor sit amet, oratio ornatus explicari pro ex'
            imagePath='/src/assets/projects/kseniia-zapiatkina-yATU3rg8tNI-unsplash.jpg'
          />
          <ProjectCard
            href='/projects'
            heading='More projects'
            subheading='Check out more projects'
            imagePath='/src/assets/projects/wen-qiao-g_w8I64FiO0-unsplash.jpg'
          />
        </div>
      </Section> */}

      { /* <Section title='Certifications'>
        <Card
          as='a'
          heading='Lorem ipsum'
          subheading='Lorem ipsum dolor sit amet, vidit suscipit at mei. Quem denique mea id. Usu ei regione indoctum dissentiunt, cu meliore fuisset mei, vel quod voluptua ne. Ex dicat impedit mel, at eum oratio possit voluptatum. Dicat ceteros cu vim. Impetus fuisset ullamcorper pri cu, his posse iisque ad, aliquam honestatis usu id.'
          date='July 2024'
          href='https://www.youtube.com/watch?v=dQw4w9WgXcQ'
        />
      </Section> */ }

      <Section title='技能'>
        <SkillLayout title='语言' skills={languages} />
        <SkillLayout title='后端' skills={backend} />
        <SkillLayout title='前端' skills={frontend} />
      </Section>
    </div>

    {/* <Quote class='mt-12' /> */}
  </main>
</PageLayout>
